<script setup lang="ts">
import {h} from 'vue'
import {App,} from 'ant-design-vue';
import { Welcome,Prompts, type PromptsProps,} from 'ant-design-x-vue';
import {
	BankFilled,
	CalculatorFilled,
	CalendarFilled,
	CalculatorOutlined,
	ClockCircleOutlined,
	BulbOutlined,
	ShoppingCartOutlined,
	RocketOutlined,
	SmileOutlined,
	BookOutlined,
	PrinterOutlined,
	VerifiedOutlined,
	ReadOutlined,
	CarOutlined,
	SoundOutlined,
	AuditOutlined, ProjectFilled,
	BuildOutlined, TableOutlined,
} from '@ant-design/icons-vue';
const { message } = App.useApp();

/* data */
//prompts样式设置
const promptsStyle={
	item: {
		flex: 'none',
		border: 0,
	},
	subItem: {
		background: 'rgba(255,255,255,0.45)',
		border: '1px solid #FFF',
		paddingBlock: '8px',
		paddingInline: '12px',
	},
}
//prompts数据结构
const promptsList: PromptsProps['items'] = [
	{
		key: '1',
		icon: h(BankFilled, { style: { color: '#5A54F9',fontSize:'20px',marginTop:'4px' } }),
		label: '法律工具',
		description: '各种法律快捷服务',
		children:[
			{
				key: '1-1',
				icon: h(BookOutlined ),
				description: `法律咨询意见书`,
			},
			{
				key: '1-2',
				icon: h(CalculatorOutlined ),
				description: `专业法律计算器`,
			},
			{
				key: '1-3',
				icon: h(AuditOutlined ),
				description: `智能法律文书`,
			},
			{
				key: '1-4',
				icon: h(VerifiedOutlined ),
				description: '认证资质评定/记录'
			}
		],
	},
	{
		key: '2',
		icon: h(CalculatorFilled, { style: { color: '#52C41A',fontSize:'20px',marginTop:'4px' } }),
		label: '资源评估工具',
		description: '快速完成复杂的专业领域报告',
		children:[
			{
				key: '2-1',
				icon: h(ReadOutlined ),
				description: `房产证分析报告`,
			},
			{
				key: '2-2',
				icon: h(BulbOutlined ),
				description: `地产估价`,
			},
			{
				key: '2-3',
				icon: h(RocketOutlined ),
				description: `房产开发成本估算`,
			},
			{
				key: '2-4',
				icon: h(BookOutlined ),
				description: `农林用户评估报告`,
			},
		],
	},
	{
		key: '3',
		icon: h(ProjectFilled, { style: { color: '#FAAD14',fontSize:'20px',marginTop:'4px' } }),
		label: '项目调查',
		description: '经常被大伙提问的功能',
		children:[
			// {
			// 	key: '2-1',
			// 	icon: h(CommentOutlined ),
			// 	description: `你是谁？你在哪里？`,
			// },
			// {
			// 	key: '2-2',
			// 	icon: h(CommentOutlined ),
			// 	description: `今天去哪吃饭好？`,
			// },
			// {
			// 	key: '2-3',
			// 	icon: h(CommentOutlined ),
			// 	description: `刘德华为什么不演反派？`,
			// },
			{
				key: '3-1',
				icon: h(BuildOutlined ),
				description: `建筑工程验收报告`,
			},
			{
				key: '3-2',
				icon: h(TableOutlined ),
				description: `农林用地验收报告`,
			},
			{
				key: '3-3',
				icon: h(ShoppingCartOutlined ),
				description: `矿产开采检查报告`,
			},
		],
	},
	{
		key: '4',
		icon: h(CalendarFilled, { style: { color: '#1989fa',fontSize:'20px', } }),
		label: '日程预定',
		description: '快捷办理流程申请及闹钟提醒!',
		children:[
			{
				key: '4-1',
				icon: h(CarOutlined ),
				description: `出差用车`,
			},
			{
				key: '4-2',
				icon: h(SoundOutlined ),
				description: `会议预约`,
			},
			{
				key: '4-3',
				icon: h(ClockCircleOutlined ),
				description: `行程闹钟`,
			},
			{
				key: '4-4',
				icon: h(SmileOutlined ),
				description: `申请假期`,
			},
			{
				key: '4-5',
				icon: h(AuditOutlined ),
				description: `用印申请`,
			},
			{
				key: '4-6',
				icon: h(PrinterOutlined ),
				description: `打印合同`,
			},
		],
	},

];

//methods
const toolItemClick = (info: any) =>{
	if(info && info.data && info.data.length>0)
	message.success(`You clicked a prompt: ${info.data[0].description}`);
}

</script>

<template>
	<div class="container">
		<div class="welcome-screen">
			<Welcome variant="borderless" title="这里是AI工具中心" description="☕️你身边的智能工具，为你自动处理公务，助你尽情创作，快来猛戳以下功能吧~" />
			<Prompts wrap :items="promptsList" :styles="promptsStyle" :on-item-click="toolItemClick" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.container{justify-content: flex-start;}
.welcome-screen{display:flex; flex-direction:column; overflow-x: hidden; overflow-y: auto;padding:20px 16px;}
:deep(.ant-prompts .ant-prompts-list){overflow-x:hidden;}
:deep(.ant-prompts-icon){line-height:0;height:24px;align-items: center;display:flex;}
:deep(.ant-prompts-list-wrap){
	align-items: stretch;
	&>.ant-prompts-item{width:100%;}
	>.ant-prompts-item-has-nest:nth-child(4){
		.ant-prompts-list-vertical{flex-direction:row; flex-wrap:wrap;}
		.ant-prompts-item{ width:calc(50% - 6px); }
	}
}
:deep(.ant-prompts-item.ant-prompts-item-has-nest){
	background-image: var(--bg-welcome-style);
}
@media screen and (min-width: 992px) {
	:deep(.ant-prompts-list-wrap>.ant-prompts-item){ width:calc(50% - 6px); }
	.welcome-screen{padding-top:10vh}
}
.ant-welcome{
	margin-bottom:20px;
}
:deep(.ant-welcome-description){color:var(--font-base-color)}
.bg-welcome{
	background: var(--bg-welcome-style); border-radius: 8px; margin: 20px 0;
}

</style>